import React from 'react'
import PropTypes from 'prop-types'
import { withStyles } from '@material-ui/core/styles';
import Toolbar from '@material-ui/core/Toolbar'
import classNames from 'classnames';
import Typography from '@material-ui/core/Typography'
import Tooltip from '@material-ui/core/Tooltip'
import IconButton from '@material-ui/core/IconButton'
import DeleteIcon from '@material-ui/icons/Delete'
import ViewColumnIcon from '@material-ui/icons/ViewColumn'
import FilterListIcon from '@material-ui/icons/FilterList';
import { lighten } from '@material-ui/core/styles/colorManipulator';
import Popover from '@material-ui/core/Popover'
import TextField from '@material-ui/core/TextField'
import Grid from '@material-ui/core/Grid'
import List from '@material-ui/core/List'
import ListItem from '@material-ui/core/ListItem'
import ListItemText from '@material-ui/core/ListItemText'
import Checkbox from '@material-ui/core/Checkbox'
const toolbarStyles = theme => ({
    root: {
        paddingRight: theme.spacing.unit,
    },
    highlight:
        theme.palette.type === 'light'
            ? {
                color: theme.palette.secondary.main,
                backgroundColor: lighten(theme.palette.secondary.light, 0.85),
            }
            : {
                color: theme.palette.text.primary,
                backgroundColor: theme.palette.secondary.dark,
            },
    spacer: {
        flex: '1 1 auto',
    },
    actions: {
        color: theme.palette.text.secondary,
    },
    title: {
        flex: '0 0 auto',
    },
    text:{
        margin: theme.spacing.unit * 3,
    },
    filter:{
        width: '300px'
    },
    ListColumn:{
        width: '100%',
        maxWidth: 360,
        backgroundColor: theme.palette.background.paper,
    }
});
class EnhancedTableToolbar extends React.Component {
    /**
     * 数据初始化
     * @type {{openColumn: boolean, openFilter: boolean, checkedRow: [null], checkedColumn: [null]}}
     */
    state = {
        openColumn: false,
        openFilter: false,
        checkedRow: [...this.props.rowNames],
        checkedColumn: [...this.props.columnNames]
    };

    handleClickFilterButton = () => {
        this.setState({
            openFilter: true,
        });
    };

    handleFilterClose = () => {
        this.setState({
            openFilter: false,
        });
    };

    handleClickColumnButton = () => {
        this.setState({
            openColumn: true,
        });
    };

    handleColumnClose = () => {
        this.setState({
            openColumn: false,
        });
    };

    handleToggle = (cellName, rowName) => () => {
        const { checkedRow, checkedColumn } = this.state
        let { rowNames, columnNames, handleColumnNames } = this.props
        const currentIndex = checkedRow.indexOf(rowName);
        const newCheckedRow = [...checkedRow]
        const newCheckedColumn = [...checkedColumn]

        if (currentIndex === -1) {
            newCheckedRow.push(rowName);
            newCheckedColumn.push(cellName);
        } else {
            newCheckedRow.splice(currentIndex, 1);
            newCheckedColumn.splice(currentIndex, 1);
        }

        rowNames = rowNames.filter(value => {
            if(newCheckedRow.indexOf(value) !== -1) {
                return true
            }else{
                return false
            }
        })

        columnNames = columnNames.filter(value => {
            if(newCheckedColumn.indexOf(value) !== -1) {
                return true
            }else{
                return false
            }
        })

        this.setState({
            checkedRow: newCheckedRow,
            checkedColumn: newCheckedColumn
        });
        handleColumnNames(rowNames, columnNames)

    };

    render() {
        const { openColumn, openFilter, } = this.state;
        const { numSelected, classes, title, batchDeleteFunc, rowNames, columnNames, filterTexts } = this.props;
        return (
            <Toolbar
                className={classNames(classes.root,{
                    [classes.highlight]: numSelected > 0,
                })}
            >
                <div className={classes.title}>
                    {
                        numSelected > 0 ? (
                            <Typography color={"inherit"} variant="subtitle1">
                                选中{numSelected}条
                            </Typography>
                        ): (
                            <Typography variant="h5" id="tableTitle">
                                {title}
                            </Typography>
                        )
                    }
                </div>
                <div className={classes.spacer}></div>
                <div className={classes.actions}>
                    {
                        numSelected > 0 ? (
                        <Tooltip title="Delete">
                            <IconButton aria-label="Delete">
                                <DeleteIcon onClick={batchDeleteFunc}/>
                            </IconButton>
                        </Tooltip>
                    ) : (
                        <React.Fragment>
                            <Tooltip title="显示列">
                                <IconButton onClick={this.handleClickColumnButton}
                                            buttonRef={nodeFilter => {
                                                this.anchorElColumn = nodeFilter;
                                            }}
                                >
                                    <ViewColumnIcon />
                                </IconButton>
                            </Tooltip>
                            <Tooltip title="筛选">
                                <IconButton onClick={this.handleClickFilterButton}
                                             buttonRef={nodeFilter => {
                                                this.anchorElFilter = nodeFilter;
                                             }}
                                >
                                    <FilterListIcon />
                                </IconButton>
                            </Tooltip>
                            <Popover
                                open={openColumn}
                                anchorEl={this.anchorElColumn}
                                onClose={this.handleColumnClose}
                                anchorOrigin={{
                                    vertical: 'bottom',
                                    horizontal: 'right',
                                }}
                                transformOrigin={{
                                    vertical: 'top',
                                    horizontal: 'right',
                                }}
                            >
                                <List dense className={classes.ListColumn}>
                                    {columnNames.map((columnName, index) => (
                                        <ListItem key={index} role={undefined} dense button onClick={this.handleToggle(columnName,rowNames[index])}>
                                            <Checkbox
                                                checked={this.state.checkedColumn.indexOf(columnName) !== -1}
                                                tabIndex={-1}
                                                disableRipple
                                            />
                                            <ListItemText primary={columnName} />
                                        </ListItem>
                                    ))}
                                </List>
                            </Popover>
                            <Popover
                                open={openFilter}
                                anchorEl={this.anchorElFilter}
                                onClose={this.handleFilterClose}
                                anchorOrigin={{
                                    vertical: 'bottom',
                                    horizontal: 'right',
                                }}
                                transformOrigin={{
                                    vertical: 'top',
                                    horizontal: 'right',
                                }}
                            >
                                <Grid container className={classes.filter}>
                                    {
                                        rowNames.map((rowName, index) =>(
                                            <Grid item xs={6}  key={index}>
                                                <TextField
                                                    margin="dense"
                                                    className={classes.text}
                                                    label={columnNames[index]}
                                                    type="text"
                                                    onChange={ event => (this.props.handleFilterTextChange(event, rowName)) }
                                                    value={filterTexts[rowName]}
                                                    autoComplete="off"
                                                />
                                            </Grid>
                                        ))
                                    }
                                </Grid>
                            </Popover>
                        </React.Fragment>
                        )
                    }
                </div>
            </Toolbar>
        )
    }
}

EnhancedTableToolbar.propTypes = {
    classes: PropTypes.object.isRequired,
    rowNames: PropTypes.array,
    columnNames: PropTypes.array,
    title: PropTypes.string,//表名
    batchDeleteFunc: PropTypes.func,//批量删除接口
    numSelected: PropTypes.number.isRequired,
    filterTexts: PropTypes.object,//筛选使用
    handleFilterTextChange: PropTypes.func
};

EnhancedTableToolbar = withStyles(toolbarStyles)(EnhancedTableToolbar);

export default  EnhancedTableToolbar